<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-sub-menu index="2">
      <template #title>文件</template>
      <el-menu-item
        index="2-1"
        >选项</el-menu-item
      >
      <el-menu-item
        index="2-2"
        >打印设置</el-menu-item
      >
      <el-menu-item
        index="2-3"
        >文件剪辑</el-menu-item
      >
      <el-menu-item index="2-4">打开</el-menu-item>
      <el-menu-item index="2-5">打开</el-menu-item>
      <el-menu-item index="2-6">保存</el-menu-item>
      <el-menu-item index="2-7">另存为</el-menu-item>
      <el-menu-item index="2-8">退出</el-menu-item>
      <el-sub-menu index="2-9">
        <template #title>波形视图</template>
        <el-menu-item index="2-9-1">导入波形视图</el-menu-item>
        <el-menu-item index="2-9-2">保存波形视图</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>工具</template>
      <el-menu-item index="3-1">剪切波形图到剪辑版</el-menu-item>
      <el-menu-item index="3-2">添加管理标签</el-menu-item>
      <el-menu-item index="3-3">通道分组设计</el-menu-item>
      <el-menu-item index="3-4">分式编辑器</el-menu-item>
      <el-menu-item index="3-5">线路参数测试</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>分析</template>
      <el-menu-item
        index="4-1"
        >相量分析</el-menu-item
      >
      <el-menu-item
        index="4-2"
        >序量分析</el-menu-item
      >
      <el-menu-item index="4-3">谐波分析</el-menu-item>
      <el-menu-item
        index="4-4"
        >功率曲线分析</el-menu-item
      >
      <el-menu-item index="4-5">阻抗分析</el-menu-item>
      <el-menu-item index="4-6">母线差异分析</el-menu-item>
      <el-menu-item index="4-7">故障分析</el-menu-item>
      <el-menu-item index="4-8">双端测距</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="5" @click="login = true">登录</el-menu-item>
  </el-menu>

  <el-dialog v-model="dialogFormVisible" :title="title[dialogTyoe]" width="80%">
    <Option v-if="dialogTyoe === 0" @saved="saved"></Option>
    <Printer v-if="dialogTyoe === 1" @saved="saved"></Printer>
    <File-cut v-if="dialogTyoe === 2" @saved="saved"></File-cut>
    <PhasorAna v-if="dialogTyoe === 3" @saved="saved"></PhasorAna>
    <Indexana v-if="dialogTyoe === 4" @saved="saved"></Indexana>
    <Powerset v-if="dialogTyoe === 5" @saved="saved"></Powerset>
  </el-dialog>
  <el-dialog v-model="login" :title="'欢迎登录'" width="25%">
    <Login @saved="saved"></Login>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";
import { ElMessage } from "element-plus";
// 选项表单
import Option from "../views/option.vue";
// 打印设置
import Printer from "../views/Printer.vue";
// 文件剪辑
import FileCut from "../views/FileCut.vue";
// 相量分析面板
import PhasorAna from "../views/PhasorAna.vue";
// 序量分析面板
import Indexana from "../views/Indexana.vue";
// 功率曲线设置面板
import Powerset from "../views/Powerset.vue";
// 登录界面
import Login from "../views/Login.vue";

// 对话框标题数组
const title = [
  "选项",
  "打印设置",
  "文件剪辑",
  "相量分析面板",
  "序列分析面板",
  "功率曲线分析",
];
const login = ref(false); // 打开登录框
const dialogTyoe = ref(0); // title映射
const dialogFormVisible = ref(false); // 打开对话框
const formLabelWidth = "140px"; // 表单宽度
const activeIndex = ref("1"); // 菜单索引

const handleSelect = (key: string, keyPath: string[]) => {
  const mapper = {
    '2-1': 0,
    '2-2': 1,
    '2-3': 2,
    '4-1': 3,
    '4-2': 4,
    '4-4': 5,
  }
  let mapperKey:string = keyPath[1];
  dialogTyoe.value = mapper[mapperKey];
  dialogFormVisible.value = true;
  console.log(dialogTyoe.value);
  // debugger
  // console.log(keyPath[1]);
};

const saved = () => {
  //子组件保存
  let msg: string = "保存成功！";
  dialogFormVisible.value = false;
  if (login.value == true) {
    login.value = false;
    msg = "登录成功！";
  }

  setTimeout(() => {
    ElMessage({
      message: msg,
      type: "success",
    });
  }, 500);
};

const logined = () => {
  login.value = false;

  ElMessage({
    message: "登录成功",
    type: "success",
  });
};
</script>

<style>
</style>
